<template>
  <div>
    <div class="layui-container fly-marginTop">
      <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
          <ul class="layui-tab-title">
            <li class="layui-this">
              <router-link :to="{ name: 'login' }">登录</router-link>
            </li>
            <li><router-link :to="{ name: 'register' }">注册</router-link></li>
          </ul>
          <div
            class="layui-form layui-tab-content"
            id="LAY_ucm"
            style="padding: 20px 0"
          >
            <div class="layui-tab-item layui-show">
              <div class="layui-form layui-form-pane">
                <form method="post">
                  <div class="layui-form-item">
                    <label for="L_email" class="layui-form-label">用户名</label>
                    <!--vee-validate@3中需要引用代理，传入rules对应vee-validate中的规则名
                    【validationProvider验证代理全局组件：将需要验证的div放入其中】
                    name配置后，校验的field属性名转换为name，【经过vee-validate.js的全局函数localize中的 'names' 属性转换为中文】
                    便于国际化，这里的name设置为英文，如果name='中文'，无法国际化
                    
                    v-slot对应vee-validate中的【errors】，参数名固定不可更改，在出现错误时，指向 errors[0] 这个错误提示
                    -->
                    <validationProvider
                      rules="required|email"
                      v-slot="{ errors }"
                      name="email"
                    >
                      <div class="layui-input-inline">
                        <input
                          type="text"
                          name="loginName"
                          v-model="member.loginName"
                          placeholder="请输入用户名"
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                      <div class="layui-form-mid">
                        <span style="color: #c00">
                          {{ errors[0] }}
                        </span>
                      </div>
                    </validationProvider>
                  </div>
                  <div class="layui-form-item">
                    <label for="L_pass" class="layui-form-label">密码</label>
                    <validationProvider
                      rules="required|min:6"
                      v-slot="{ errors }"
                      name="password"
                    >
                      <div class="layui-input-inline">
                        <input
                          type="password"
                          name="password"
                          v-model="member.password"
                          placeholder="请输入密码"
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                      <div class="layui-form-mid">
                        <span style="color: #c00">
                          {{ errors[0] }}
                        </span>
                      </div>
                    </validationProvider>
                  </div>
                  <div class="layui-form-item">
                    <label for="L_captcha" class="layui-form-label"
                      >验证码</label
                    >
                    <validationProvider
                      rules="required|min:4"
                      v-slot="{ errors }"
                      name="captcha"
                    >
                      <div class="layui-input-inline">
                        <input
                          type="text"
                          name="captcha"
                          v-model="captcha"
                          placeholder="请输入验证码"
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                      <div class="captchaCode layui-form-mid">
                        <img
                          @click="getCaptchaCode"
                          id="captchaCode"
                          alt="验证码"
                        />
                      </div>
                      <div class="layui-form-mid">
                        <span style="color: #c00">
                          {{ errors[0] }}
                        </span>
                      </div>
                    </validationProvider>
                  </div>
                  <div class="layui-form-item">
                    <button class="layui-btn" type="button" @click="loginIn()">立即登录</button>
                    <span style="padding-left: 20px">
                      <router-link :to="{ name: 'forget' }">忘记密码？</router-link>
                    </span>
                  </div>
                  <div class="layui-form-item fly-form-app">
                    <span>或者使用社交账号登入</span>
                    <a
                      href=""
                      onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})"
                      class="iconfont icon-qq"
                      title="QQ登入"
                    ></a>
                    <a
                      href=""
                      onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})"
                      class="iconfont icon-weibo"
                      title="微博登入"
                    ></a>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCaptcha, getCaptchaAx, loginAxios } from "@/api/login";
//引入vee-validate@3，3之后需要的验证代理
import { ValidationProvider } from "vee-validate";
export default {
  name: "Login",
  components: { ValidationProvider },
  data() {
    return {
      captcha: "",
      member: {
        loginName: "",
        password: "",
        mobile: "",
        imgCodeToken: "",
        SID:"",
      },
    };
  },
  mounted() {
    //this._getCaptchaAxios();
    let SID='';
    if(localStorage.getItem('SID')){
      SID=localStorage.getItem('SID')
    }else{
      SID=this.$uuidv4()
      localStorage.setItem('SID',SID)
    }
    //清空localStorage，可以在控制台直接打印：localStorage.clear()
    //将SID放入vuex的store中state，使用mutations方法获取
    this.$store.commit('setSID',SID)
    this.getCaptchaCode();
    console.log("本地缓存安全标识：",localStorage.getItem('SID'));
  },
  methods: {
    //api接口获取验证码测试
    _getCaptcha() {
      setTimeout(() => {
        $("#captchaCode").attr("src", getCaptcha);
      }, 1000);
    },
    //这里可以直接存放SID安全标识（=uuid）
    _getCaptchaAxios(SID) {
      getCaptchaAx().then((res) => {
        console.log("res",res);
        if (res.code === 200) {
          $("#captchaCode").attr("src", res.data);
        }
      });
    },
    getCaptchaCode() {
      //this.member.imgCodeToken = Tool.get8UUID(8);
      //从vuex的store中获取state更快
      console.log("store中的state：",this.$store.state.SID)
      this.member.SID=this.$store.state.SID
      
      $("#captchaCode").attr(
        "src",
        process.env.VUE_APP_SERVER +
          "/business/member/captcha/code/" +
          // this.member.imgCodeToken
          //localStorage.getItem('SID')
          this.member.SID
      );
    },
    loginIn(){
      console.log("登录的用户：",this.member)
      loginAxios(this.member).then((res)=>{
          if(res.code===200){
            console.log("登录成功：",res)
          }
        })
    },
  },
};
</script>
<style lang="scss" scoped>
.layui-form-mid {
  margin-top: -8px;
}
.captchaCode {
  cursor: pointer;
}
</style>